<template>
	<view class="content">
		<tui-navigation-bar splitLine @init="initNavigation" title="分部验收">
			<view class="tui-header-icon" :style="{ marginTop: top + 'px' }"
				style="display: flex;justify-content: space-between;">
				<tui-icon name="arrowleft" color='#000' @click="back"></tui-icon>
				<tui-icon v-if='approval===false' name="plus" color='#000' @click="newSubsection"></tui-icon>
			</view>
		</tui-navigation-bar>
		<!-- 导航栏占位符，防止内容塌陷 -->
		<view :style="{ height: navBarHeight+'px' }"></view>
		<tui-searchbar radius='40rpx' placeholder="请输入子分部验收编号、子分部工程名称" @search="search" @clear="clear"></tui-searchbar>
		<tui-tab :tabs="tabs" @change="change" :current='currentTabIndex'></tui-tab>
		<scroll-view scroll-y="true" class="scroll">
			<ul v-for="(item,index) in tabList" :key='index' class="card"
				@click="checkOrRatify(item.id,item.flowStatus,item.comment)">
				<li class='lis'><text class='title'>【验收编号】</text><text class="titleText">{{item.subsectionCode}}</text>
				</li>
				<li class='lis'><text class='title'>【单位工程】</text><text class="titleText">{{item.unitProjectName}}</text>
				</li>
				<li class='lis'><text class='title'>【分部工程】</text><text class="titleText">{{item.subsectionName}}</text>
				</li>
				<li class='lis'><text class='title'>【子分部工程数】</text><text
						class="titleText">{{item.tenderSubsectionQuantity}}</text></li>
				<li class='lis'><text class='title'>【验收日期】</text><text class="titleText">{{item.checkStartDate}} 至
						{{item.checkEndDate}}</text></li>
				<view :class="['state', getStateClass(item.flowStatus)]">{{item.flowStatus}}</view>
			</ul>
		</scroll-view>
	</view>
</template>

<script setup lang='ts'>
	import {
		ref
	} from 'vue';
	import {
		getProjectSubsectionList,
		getTask
	} from '@/apis/subsection.js';
	import {
		onShow
	} from '@dcloudio/uni-app'
	const projectId = uni.getStorageSync("projectInfo").id
	const top = ref(0)
	const navBarHeight = uni.getStorageSync('systemInfo').statusBarHeight + 46
	//是否拥有审批权限
	const approval = uni.getStorageSync('userRoleInProject').perms['mobile:subsection:approval']
	const tabs = ref(!approval ? ['审批中', '审批通过', '审批不通过'] : ['待处理', '已处理'])
	const tabList = ref([])
	const list = ref([])
	// 当前的标签索引
	const currentTabIndex = ref(0);
	//更改标签内容
	const change = (e) => {
		currentTabIndex.value = e.index;
		//审批
		if (approval) {
			if (e.index === 0) {
				tabList.value.splice(0, tabList.value.length)
				tabList.value.push(...list.value.todo);
			} else {
				tabList.value.splice(0, tabList.value.length)
				tabList.value.push(...list.value.done);
			}
		} else {
			//施工
			if (e.index === 0) {
				tabList.value.splice(0, tabList.value.length)
				list.value.forEach(item => {
					if (item.flowStatus === '审批中') {
						tabList.value.push(item);
					}
				});
			} else if (e.index === 1) {
				tabList.value.splice(0, tabList.value.length)
				list.value.forEach(item => {
					if (item.flowStatus === '审批通过') {
						tabList.value.push(item);
					}
				});
			} else {
				tabList.value.splice(0, tabList.value.length)
				list.value.forEach(item => {
					if (item.flowStatus === '审批不通过') {
						tabList.value.push(item);
					}
				});
			}
		}
	}

	const initNavigation = (e) => {
		top.value = e.top;
	}

	onShow(() => {
		tabList.value = []
		// currentTabIndex.value=0
		if (approval) {
			getTask(projectId).then(res => {
				list.value = res.data.data
				if (currentTabIndex.value === 0) {
					tabList.value.push(...list.value.todo)
				} else {
					tabList.value.push(...list.value.done)
				}
			})
		} else {
			console.log(currentTabIndex.value);
			getProjectSubsectionList(projectId, 1, -1).then(res => {
				list.value = res.data.data
				if (currentTabIndex.value === 0) {
					tabList.value.push(...list.value.filter(e => e.flowStatus === '审批中'))
				} else if (currentTabIndex.value === 1) {
					tabList.value.push(...list.value.filter(e => e.flowStatus === '审批通过'))
				} else {
					tabList.value.push(...list.value.filter(e => e.flowStatus === '审批不通过'))
				}
			})
		}

	})

	const search = ({
		value
	}) => {
		tabList.value = tabList.value.filter(item =>
			item.subsectionCode.includes(value) ||
			item.subsectionName.includes(value)
		)
	}

	const clear = () => {
		if (approval) {
			if (currentTabIndex.value === 0) {
				tabList.value = [...list.value.todo];
			} else {
				tabList.value = [...list.value.done];
			}
		} else {
			if (currentTabIndex.value === 0) {
				tabList.value = list.value.filter(item => item.flowStatus === '审批中');
			} else if (currentTabIndex.value === 1) {
				tabList.value = list.value.filter(item => item.flowStatus === '审批通过');
			} else {
				tabList.value = list.value.filter(item => item.flowStatus === '审批不通过');
			}
		}
	}

	//审批或者查看子分部
	const checkOrRatify = (id, flowStatus, comment) => {
		uni.navigateTo({
			url: `/pages/subsection/checkSubsectionMsg?id=${id}&flowStatus=${flowStatus}&approval=${approval}&comment=${comment}`
		})
	}

	//新增分部
	const newSubsection = () => {
		if (approval) return
		uni.navigateTo({
			url: '/pages/subsection/newSubsection'
		})
	}

	const back = () => {
		uni.navigateBack()
	}

	//动态绑定样式
	const getStateClass = (state) => {
		switch (state) {
			case '审批不通过':
				return 'state-fail';
			case '审批通过':
				return 'state-pass';
			case '审批中':
				return 'state-progress';
			default:
				return '';
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		background-color: #fafafa;

		.tui-header-icon {
			width: 100%;
			position: fixed;
			top: 0;
			padding: 0 12rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			z-index: 99999;
			box-sizing: border-box;
		}

		.tui-header-icon-right {
			width: 100%;
			position: fixed;
			top: 0;
			right: 0;
			padding: 0 12rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			z-index: 99999;
			box-sizing: border-box;
		}

		.scroll {
			background-color: #fafafa;
			box-sizing: border-box;

			.card {
				width: 95%;
				box-sizing: border-box;
				margin: 20rpx auto;
				padding: 15rpx;
				position: relative;
				border-radius: 20rpx;
				background-color: #ffffff;
				flex-direction: column;

				.lis {
					display: flex;
					flex: 1;
					align-items: center;
					margin: 10rpx 0;
					font-size: 14px;
					color: #7f7f7f;

					.title {
						margin-right: 20rpx;
					}

					.titleText {}
				}

				.state {
					position: absolute;
					padding: 0 20rpx;
					text-align: center;
					line-height: 60rpx;
					border: 1px solid #ff6937;
					right: 20rpx;
					top: 20rpx;
					color: #ff6937;

					&.state-fail {
						color: #ff4d4f;
						border-color: #ff4d4f;
					}

					&.state-pass {
						color: #3086ff;
						border-color: #3086ff;
					}

					&.state-progress {
						color: #faad14;
						border-color: #faad14;
					}

					&.state-pending {
						color: #d9d9d9;
						border-color: #d9d9d9;
					}
				}
			}
		}
	}
</style>